<template>
  <a-input-number
    v-model="nowVal"
    :placeholder="placeholder"
    allow-clear
    @change="changeHandle"
  />
</template>

<script setup lang="ts">
  import { ref, watch } from 'vue';

  const props = defineProps({
    value: {
      type: Number,
      default: 0,
    },
    placeholder: {
      type: String,
      default: '请输入',
    },
  });
  const emit = defineEmits(['update:value']);

  const nowVal = ref(props.value);
  watch(
    () => props.value,
    (newVal) => {
      nowVal.value = newVal;
    }
  );
  const changeHandle = () => {
    emit('update:value', nowVal.value);
  };
</script>
